<!--
 * @Author: hq_deveolper hz858632@163.com
 * @Date: 2024-10-02 17:05:33
 * @LastEditors: hq_deveolper hz858632@163.com
 * @LastEditTime: 2024-10-03 14:22:40
 * @FilePath: \city-screen\src\views\JieXiangChuiShao\components\ChuiShaoShiXiangTongJi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="area">
        <div class="area-top">街巷吹哨案件统计</div>
        <div class="area-main" id="AnJian"></div>
    </div>
</template>
<script>
import { streetChuiShaoDB } from '@/api/index'
export default {
    data() {
        return {

        }
    },
    mounted() {
        // this.loadEcharts({streetId:undefined,type:undefined})
    },
    methods: {
        async loadEcharts({streetId=undefined,type=undefined}) {
            const res = await streetChuiShaoDB.getStreetOrderNum({streetId,type})
            let labelList=res.data.map(item=>{return item.type})
            let numData=res.data.map(item=>{return item.num})
            var chartDom = document.getElementById('AnJian');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                backgroundColor: 'transparent',
                grid: {
                    top: '10%',
                    right: '5%',
                    left: '10%',
                    bottom: '30%'
                },
                xAxis: [{
                    type: 'category',
                    color: '#59588D',
                    axisPointer: {
                        type: 'line'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#272456'
                        }
                    },
                    axisLabel: {
                        margin: 20,
                        color: '#fff',
                        rotate: 40,
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    data: labelList
                }],
                yAxis: [{
                    min: 0,
                    max: 200,
                    axisLabel: {
                        color: '#fff',
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#272456'
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: numData,
                    barWidth: '12px',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(60, 255, 255, 1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(245, 247, 250, 0)' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 0, 0],
                            shadowColor: 'rgba(0,255,225,1)',
                            shadowBlur: 4,
                        }
                    }
                }]
            };

            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="less" scoped>
.area {
    width: 100%;
    padding: 0px 10px;

    .area-top {
        width: 460px;
        height: 41px;
        background: url(../../../assets/images/jiexiangchuishao/item-cillp.png) no-repeat;
        background-size: 100% 100%;
        margin-left: 50%;
        transform: translate(-50%);
        font-family: ShiShangZhongHeiJianTi;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        padding-left: 15px;
        line-height: 41px;
    }

    .area-main {
        width: 100%;
        height: 255px;
    }
}
</style>